<!DOCTYPE html>
<html lang="en">
	<head>
		

		<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" href="grid.css" title="openJsGrid"/>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="root.js"></script>
		<script src="grid.js"></script>
		
		<script type="text/javascript">
			$(function() {
				
				var $countryGrid = $(".countries").grid();
				var $cityGrid = $(".cities").grid();
				
				$countryGrid.on("rowClick",function(event, $row, rowData) {
					var code = rowData.Code;
					
					$cityGrid.grid("load",{
						action: "world-ajax.php?type=city&country=" + code
					});
					
				});
				
				
				// row hover
				$countryGrid.on("mouseover",".cell[data-row]",function() {
					var id = this.getAttribute("data-row");
					$(".grid-row-"+id).css("background","#eee");
				});
				
				// row out
				$countryGrid.on("mouseout",".cell[data-row]",function() {
					var id = this.getAttribute("data-row");
					$(".grid-row-"+id).css("background","#fff");
				});
				
			});
		</script>
	</head>
	<body>
	
		<h2>Countries</h2>
		<table class="grid countries" action="world-ajax.php?type=country">
			<tr>
				<th col="Code">Code</th>
				<th col="Name">Name</th>
				<th col="Continent">Continent</th>
				<th col="Region">Region</th>
				<th col="Population">Population</th>
				<th col="SurfaceArea">SurfaceArea</th>
			</tr>
		</table>
		
		<h2>Cities</h2>
		<table class="grid cities" action="world-ajax.php?type=city&country=USA">
			<tr>
				<th col="Name">Name</th>
				<th col="District">Distict</th>
				<th col="Population">Population</th>
				<th col="CountryName">From Country</th>
			</tr>
		</table>
		
	</body>
</html>
	